<template>
  <div class="server-card card-item">
    <div class="sever__head">
      <div class="basic">
        <span class="name">火山引擎</span>
        <span class="info">{{ props.serverMonitor.systemInfo }}</span>
        <span class="ip">{{ props.serverIp }}</span>
      </div>

      <div class="status">
        <span class="dot"
              :style="{ 'background-color': props.isOnline ? '#4CAF50' : '#FF3030'}">
        </span>
        <span>{{ props.isOnline ? '在线' : '离线' }}</span>
      </div>
    </div>

    <div class="server__basic">
      <div class="item">
        <i class="fa-solid fa-microchip" style="color: #3498db;"></i>
        <span>{{ props.serverMonitor.cpuCores }} 核</span>
      </div>

      <div class="item">
        <i class="fa-solid fa-memory" style="color: #2ecc71;"></i>
        <span>{{ props.serverMonitor.totalMemory }} G</span>
      </div>

      <div class="item">
        <i class="fa-solid fa-hard-drive" style="color: #9b59b6;"></i>
        <span>{{ props.serverMonitor.totalDisk }} G</span>
      </div>

      <div class="item">
        <i class="fa-solid fa-power-off" style="color: #1abc9c;"></i>
        <span>{{ props.serverMonitor.uptime }} 天</span>
      </div>
    </div>

    <div class="server__usage">
      <div class="item">
        <span class="name">CPU</span>
        <el-progress type="circle" :width="60"
                     :percentage="props.serverMonitor.cpuUsage"
                     :color="parseUsageColor(props.serverMonitor.cpuUsage)" />
      </div>

      <div class="item">
        <span class="name">内存</span>
        <el-progress type="circle" :width="60"
                     :percentage="props.serverMonitor.memoryUsage"
                     :color="parseUsageColor(props.serverMonitor.memoryUsage)"/>
      </div>

      <div class="item">
        <span class="name">磁盘</span>
        <el-progress type="circle" :width="60"
                     :percentage="props.serverMonitor.diskUsage"
                     :color="parseUsageColor(props.serverMonitor.diskUsage)"/>
      </div>

      <div class="item">
        <span class="name">网络</span>
        <div class="network">
          <span>上行 {{ props.serverMonitor.networkSpeed.tx }} KB/s</span>
          <span>下行 {{ props.serverMonitor.networkSpeed.rx }} KB/s</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IServerMonitor } from '@/types/server.ts'

const props = defineProps({
  isOnline: {
    required: true,
    type: Boolean
  },
  serverIp: {
    required: true,
    type: String
  },
  serverMonitor: {
    required: true,
    type: Object as PropType<IServerMonitor>
  }
})

const parseUsageColor = (usage: number) => {
  if (usage < 25) return '#66BB6A'
  if (usage < 50) return '#42A5F5'
  if (usage < 75) return '#FFA726'
  return '#EF5350'
}
</script>

<style lang="scss">
.server-card {
  width: 100%;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  .sever__head {
    display: flex;
    justify-content: space-between;

    .basic {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .status {
      display: flex;
      align-items: center;

      .dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }

  .server__basic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid lightgrey;
    color: gray;
    font-size: small;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
    }
  }

  .server__usage {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 120px;

    .item {
      display: grid;
      grid-template-rows: 25px 1fr;
      justify-items: center;
      align-items: center;
      gap: 5px;

      .name {
        color: #9C9C9C;
      }

      .el-progress {
        .el-progress__text {
          span {
            font-size: 1rem;
          }
        }
      }

      .network {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }
  }
}
</style>
